<!--
 * @Author: 孙文豪
 * @Description: 新增商品信息弹窗
 * @Date: 2024-03-25 15:02:04
 * @LastEditTime: 2024-03-28 15:25:43
 * @LastEditors: 孙文豪
-->
<template>
    <swh-drag-box
      :title="isEdit ? '编辑供货商信息' : '新增供货商'"
      :zIndex="99"
      :top="'200px'"
      :isMask="true"
      :isPadding="false"
      @closePortability="close"
      @confirmDarg="confirmBox"
    >
      <div class="other-add">
        <div class="personal-info">
          <div class="input-box">
            <span class="text">供货商名称：</span>
            <input
              class="jxc-input"
              :class="{ required: requiredlist.includes('sourceName') }"
              type="text"
              maxlength="20"
              placeholder="请输入供货商名称"
              v-model.trim="sourceName"
            />
          </div>
          <div class="input-box">
            <span class="text">供货商地址：</span>
            <input
              class="jxc-input"
              :class="{ required: requiredlist.includes('sourceAddress') }"
              type="text"
              maxlength="20"
              placeholder="请输入供货商地址"
              v-model.trim="sourceAddress"
            />
          </div>
          <div class="input-box">
            <span class="text">供货商电话：</span>
  
            <input
              class="jxc-input"
              :class="{ required: requiredlist.includes('sourcePhone') }"
              type="text"
              maxlength="11"
              placeholder="请输入供货商电话"
              v-model.trim="sourcePhone"
            />
          </div>
          <div class="input-box">
            <span class="text">供货信息：</span>
            <textarea
              maxlength="100"
              v-model.trim="sourceSupply"
              class="jxc-input-text"
              placeholder="供货信息（上限100字符）"
            ></textarea>
          </div>
        </div>
      </div>
    </swh-drag-box>
</template>
  
  <script>
  import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  import { integer } from '@/utils/common.js';
  import { sourceTableConfig } from './customer.js';
  export default {
    name: '',
    props: {
      editObject: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    setup(props, ctx) {
      const other = reactive({ sourceTableConfig, requiredlist: [],isEdit:false });
      const data = reactive({
        id: '', //商品id  存在时编辑，不存在是新增
        sourceName: '', //商品名称
        sourceAddress: '', //商品名称
        sourcePhone: '', //商品查询码
        sourceSupply: '' //描述

      });
      onBeforeMount(() => {});
      onMounted(() => {
        if (JSON.stringify(props.editObject) !== '{}') {
          Object.assign(data, props.editObject);
        }
        console.log(data,props.editObject)
        // 判断是新增还是编辑
        other.isEdit = Boolean(data.id)
        // 获取必填的字段数组
        other.sourceTableConfig.forEach((item) => {
          if (item.required) {
            other.requiredlist.push(item.dataIndex);
          }
        });
      });
  
    
      const close = () => {
        ctx.emit('close');
      };
      // 点击确认增加或者编辑
      const confirmBox = () => {
        let bool = true; //控制必填验证
        try {
          other.sourceTableConfig.forEach((item) => {
            if (item.required) {
              if (!data[item.dataIndex]) {
                // 这里没有内容
                throw new Error(item.name);
              }
            }
          });
        } catch (name) {
          bool = false;
          Message({
            type: 'warning',
            content: `请输入${name.message}`
          });
        }
  
        if (!bool) return;
        // 新增时，增加id
        if (!data.id) {
          // 新增 增加id
          data.id =`source_${ Date.now().toString(16)}`;
        }
        ctx.emit('confirmBox', data);
        close();
      };
      return {
        // getImageUrl,
        confirmBox,
        close,
        ...toRefs(data),
        ...toRefs(other)
      };
    }
  };
  </script>
  <style scoped lang="less">
  .other-add {
    width: 700px;
    height: 300px;
    .personal-info {
      width: 100%;
      padding: 20px 20px 0 20px;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
      .input-box {
        overflow: hidden;
        float: left;
        margin-right: 30px;
        margin-bottom: 20px;
        position: relative;
        .text {
          float: left;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: @HSB;
          width: 100px;
        }
        .jxc-input {
          float: left;
          width: 200px;
          height: 32px;
          padding: 0 10px;
          border-radius: 4px;
          box-sizing: border-box;
          background: #fff;
          line-height: 32px;
          outline: none;
          border: 1px solid @HSD;
          &.required {
            &::-webkit-input-placeholder {
              color: @CS;
            }
          }
          &:focus {
            border: 1px solid @TSA;
          }
          &::-webkit-input-placeholder {
            color: @HSD;
          }
        }
        .other-img {
          width: 200px;
        }
        .jxc-input-text {
          float: left;
          width: 530px;
          height: 82px;
          padding: 0 10px;
          border-radius: 4px;
          box-sizing: border-box;
          background: #fff;
          line-height: 32px;
          outline: none;
          border: 1px solid @HSD;
          resize: none;
          &::-webkit-input-placeholder {
            font-size: 14px;
            font-family: 'serif';
          }
          &::-webkit-scrollbar {
            width: 3px;
          }
        }
      }
    }
  }
  </style>
  